<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>账单详情</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.css">
        <!--如果你用到了拓展包中的组件，还需要引用下面两个-->
        <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.css">
        <link rel="stylesheet" href="{{asset('/css/mobile/common_web.css')}}">
        <link rel="stylesheet" href="{{asset('/css/mobile/check_detail.css')}}">
    </head>
    <body>
        <div class="page-group">
        <!-- 单个page ,第一个.page默认被展示-->
        <div class="page">
            <!-- 标题栏 -->
            <header class="bar bar-nav" style="background:#24314D;color:#fff;height:3rem;line-height:3rem;">
                <a class="icon icon-left pull-left external" style="font-size:1.4rem;color:#fff;line-height:2rem;" href="{{url('/admin/billIndex')}}"></a>
                <h1 class="title" style="color:#fff;line-height:3rem;">账单详情</h1>
            </header>
            <!-- 工具栏 -->
            <nav class="bar bar-tab" style="background:#fff;">
                <a class="tab-item external" href="{{url('/admin/home')}}">
                    <i class="icon iconfont">&#xe649;</i>
                    <span class="tab-label">首页</span>
                </a>
                <a class="tab-item external active" href="{{url('/admin/person')}}">
                    <i class="icon iconfont">&#xe648;</i>
                    <span class="tab-label">个人设置</span>
                </a>
            </nav>
            <!-- 这里是页面内容区 -->
            <div class="content">
                <div class="list-block">
                    <ul style="margin:0 auto;">
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title" style="font-weight: 700;color:#000;font-size:0.85rem;">
                                    用户信息：
                                    <span>{{$data['full_name']}}</span>
                                </div>
                                <div class="item-after" style="font-weight: 700;color:#000;font-size:0.85rem;">周期：
                                    <span>{{$data['year']}}/{{$data['month']}}/01-{{$data['year']}}/{{$data['month']}}
                                        /31</span>
                                </div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">收款人姓名：
                                    <span>{{$data['payee_name']}}</span>
                                </div>
                                <div class="item-after">
                                    银行账号：
                                    <span>{{$data['band_card']}}</span>
                                </div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">收款金额：
                                    <span>{{$data['total_income']}}</span>元
                                </div>
                                <div class="item-after">
                                    账户：
                                    <span>{{$data['user_name']}}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="list-block">
                    <ul style="margin:0 auto;">
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title" style="font-weight: 700;font-size:0.85rem;color:#000;">
                                    本月账单分析
                                </div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">本月收入金额为：
                                    <span>{{$data['this_month_income']}}元</span>
                                </div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">我代理的用户：
                                    <span>{{count($data['users_info'])}}</span>人
                                </div>
                                <div class="item-after">
                                    本月新增用户：
                                    <span>{{$data['user_num']}}</span>人
                                </div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">单用户最高收入：
                                    <span>{{$data['max_income']}}</span>元
                                </div>
                                <div class="item-after">
                                    最低收入：
                                    <span>{{$data['min_income']}}</span>元
                                </div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title" style="font-weight: 700;color:#000;font-size:0.85rem;">用户收入统计图：
                                </div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title" style="width:100%;">
                                    <div id="main" style="width:100%;height:15rem;"></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="list-block">
                    <ul style="margin:0 auto;">
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title" style="font-weight: 700;color:#000;font-size:0.85rem;">用户收入详情</div>
                                <div class="item-after">
                                    周期：
                                    <span>{{$data['year']}}/{{$data['month']}}/01-{{$data['year']}}/{{$data['month']}}
                                        /31</span>
                                </div>
                            </div>
                        </li>
                        <li class="item-content">
                            <table border="1" width="98%">
                                <tr>
                                    <th>编号</th>
                                    <th>用户名</th>
                                    <th>周期收入</th>
                                </tr>
                                @foreach($data['user_list'] as $v)
                                    <tr>
                                        <td>{{$v['id']}}</td>
                                        <td>{{$v['performer']}}</td>
                                        <td>{{$v['agent_money']}}</td>
                                    </tr>
                                @endforeach
                            </table>
                        </li>
                    </ul>
                </div>
                {{--<div class="content-block">--}}
                    {{--<div class="row">--}}
                        {{--<div class="col-50">--}}
                            {{--<button onclick="location.href='{{url('/admin/billIndex')}}'" class="button button-big button-fill button-danger btn" style="background:#CC0000;">--}}
                                {{--确认无误--}}
                            {{--</button>--}}
                        {{--</div>--}}
                        {{--<div class="col-50">--}}
                            {{--<button class="button button-big button-fill  button-warning btn" style="background:#999999;">--}}
                                {{--我有疑问--}}
                            {{--</button>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                {{--</div>--}}
                {{--<div class="list-block">--}}
                    {{--<ul style="margin:0 auto;">--}}
                        {{--<li class="item-content">--}}
                            {{--<div class="item-inner">--}}
                                {{--<div class="item-title" style="font-weight: 700;color:#000;font-size:0.85rem;">--}}
                                    {{--注意事项--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</li>--}}
                        {{--<li class="item-content">--}}
                            {{--<div class="item-inner">--}}
                                {{--<div class="item-title">【确认无误】后您的收入将计算到您的余额中；</div>--}}
                            {{--</div>--}}
                        {{--</li>--}}
                        {{--<li class="item-content">--}}
                            {{--<div class="item-inner">--}}
                                {{--<div class="item-title" style="white-space: pre-wrap;">--}}
                                    {{--<p>【我有疑问】请拨打400-XXX-XXX工作电话核实，核实无误后请确认无误，或由工作人员协助处理。</p>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</li>--}}
                    {{--</ul>--}}
                {{--</div>--}}
            </div>
        </div>
    </div>
    </body>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.js' charset='utf-8'></script>
    <script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
    <script src="{{asset('/common/js/echarts.min.js')}}"></script>
    <script>$.init()</script>
    <script>
      $(function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
          // title: {
          // 	text: 'ECharts 入门示例'
          // },
          color: ['#2B4A7B'],
          // legend: {
          // 	data:['销量']
          // },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            data: ["0-10元", "10-50元", "50-200元", "200-500元", "500-2000元", "2000元以上"]
          },
          yAxis: {

            type: 'value'

          },
          series: [{
            name: '人',
            type: 'bar',
            data: {{$data['echart_data']}}
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      })
    </script>
</html>
